<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品分类</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/sub-menu.css">
    <style>
        .container {
            background: cornsilk;
            padding:10px 20px 50px;
        }
        a {
            text-decoration: none;
            color: #4d4d4d;
        }
        img {
            width: 100%;
        }
        section {
            width: 100%;
            margin-top: 10px;
            overflow-y: auto;
        }
        section ul {
            border: 1px solid #dbdbdb;
            padding: 0;
            overflow-y: auto;
        }

        .screen1{
            min-height: 40px;
            border: 1px solid #ddd;
            line-height: 40px;
        }
        .screen1 div span{
            display: inline-block;
            padding: 5px 10px;
            margin-left:15px ;
            color: #797979;
        }
        .screen ul {
            list-style: none; /* 移除默认列表样式 */
            padding: 0; /* 去除内边距 */
            margin: 0; /* 去除外边距 */
        }

        .screen li {
            display: flex; /* 使用 Flexbox 布局 */
            align-items: center; /* 垂直居中 */
            margin-bottom: 10px; /* 调整各类别间距 */
            border-bottom: 1px solid #ddd; /* 添加分隔线 */
            padding: 10px 0; /* 调整上下内边距 */
        }

        .screen .firstterm {
            flex: 0 0 60px; /* 固定宽度 */
            text-align: right;
            margin-right: 10px; /* 右侧留出间距 */
            color: #333; /* 文字颜色 */
        }

        .screen .otherterm {
            display: flex; /* 使用 Flexbox 布局 */
            flex-wrap: wrap; /* 自动换行 */
            gap: 10px; /* 设置项目间距 */
        }

        .screen .otherterm a {
            padding: 5px 10px; /* 调整链接内边距 */
            text-decoration: none; /* 去除链接下划线 */
            color: #666; /* 链接文字颜色 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 4px; /* 圆角边框 */
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        .screen .otherterm a:hover {
            background-color: #f06000; /* 链接鼠标悬停时的背景色 */
            color: #fff; /* 鼠标悬停时的文字颜色 */
        }
    </style>
    <style>
        .search-group {
            width: 35%;
            margin: 0 auto;
            padding: 30px 0 50px 0;
            background: #fff;
        }
        .form-control{
            height: 47px;
        }
        .btn-search{
            padding: 9px 26px;
            background: #e4393c;
            color: #fff;
            font-size: 19px;
        }
        .btn-search:hover {
            color: #fff;
            background-color: #f66060;
        }
    </style>
    <style>
        ul.list-group.list-group-1 {
            text-align: right;
            padding: 5px 30px 0 0;
            background: #eee;
        }
        li.list-group-item.list1 {
            display: inline-block;
            border: 0;
            background: #eee;
        }

        ul.list-group.list-group-1 a{
            color: #0e0e0e;

        }
        /******login弹出层样式****/

        .form{
            width: 350px;
            background-color: #fff;
            height: 220px;
            margin: 10px auto;
        }
        .form>div{
            position: relative;
            line-height: 100%;
            margin-bottom: 8px;
        }
        .form>div input{
            width: 100%;
            height: 35px;
            border-radius: 3px;
            border: 1px solid #ddd;
            text-indent: 40px;
        }
        .form>div label{
            position: absolute;
            left: 0;
            top:10px;
            width: 30px;
            text-align: right;
            color: #808080;
        }
        .form .yanzhengma input{
            width: 50%;
            text-indent: 10px;
        }
        .form .yanzhengma img{
            height: 30px;
            width: 75px;
            font-size: 0;
            vertical-align: middle;
        }
        .form .yanzhengma a{
            font-size: small;
            text-decoration: none;
            color: #00a5e0;
        }
        .form>div.chk label{
            width: 100px;
            padding-left: 20px;
        }
        .form>div.chk input{
            width: 22px;
            height: 22px;
            margin-top: 8px;
        }
        .form>div.chk a{
            float: right;
            margin-top: 9px;
            text-decoration: none;
            color: #00a5e0;
        }
        .buts button{
            width: 48%;
            float: left;
        }
        .buts button:first-child{
            margin-right: 4%;
        }
        /************login弹出层样式结束********************/
    </style>
    <style>
        .goods_item {
            display: inline-block;
            width: 234px;
            height: 366px;
            padding: 22px 20px 0;
            margin: 10px 25px;
            color: #9b9b9b;
            box-sizing: border-box;
            background: #fff;
        }
        .goods_item:hover {
            border: 2px solid #fe938c;
        }

        .btn-search:hover {
            color: #fff;
            background-color: #f06000;
        }
        .goods_describe{
            height: 30px;
            font-size: 14px;
            padding: 15px 0;
            white-space: normal;
        }
        .goods_describe span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 限制文本显示的行数 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 使用省略号代替多余部分 */
        }
        .goods_price{
            height: 24px;
            margin: 30px 0px 4px -3px;
            font-size: 18px;
            color: #fd3f31;
        }
        .goods_storeName{
            font-size: 12px;
            border-bottom: 1px solid #e7e7e7;
        }
        .goods_sales{
            margin-top: 10px;
            padding-left: 115px;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<ul class="list-group list-group-1" id="top-part">
    <li class="list-group-item list1"><a href="./index.jsp"><i class="fa fa-home"></i> 首页</a></li>
    <c:if test="${empty user }">
        <li class="list-group-item list1">登录【<a href="" data-toggle="modal" data-target="#myModalLogin" style="font-size: small;color:#e4393c ">请登录</a>】</li>
    </c:if>
    <li role="presentation" class="dropdown list-group-item list1">
        <c:if test="${!empty user }">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            <img src="${user.headImg }" style="border-radius: 50%;width: 25px;height: 25px;"/><b>${user.nickname }</b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="user.jsp">个人设置</a></li>
            <li><a href="../logout">退出</a></li>
        </ul>
        <c:if test="${user.role == 1}">
    <li class="list-group-item list1"><a href="../backend/main.jsp"><i class="fa fa-cog"></i> 后台管理</a></li>
    </c:if>
    </c:if>
    </li>
    <li class="list-group-item list1"><a href="../myCartServlet"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true" style="color:#c63205"></span> 购物车</a></li>
    <li class="list-group-item list1"><a href="../selectOrder"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 我的订单</a></li>
</ul>
<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">欢迎登陆</h4>
            </div>
            <div class="modal-body">
                <form action="../login.do" class="form">
                    <div class="name">
                        <label for="loginname"><span class="glyphicon glyphicon-user"></span></label>
                        <input type="text" placeholder="用户名" id="loginname"  name="loginname">
                    </div>
                    <div class="password">
                        <label for="pwd"><span class="glyphicon glyphicon-lock"></span></label>
                        <input type="password" placeholder="请输入密码"  id="pwd" name="pwd">
                    </div>
                    <div class="yanzhengma">
                        <input type="text" placeholder="输入验证码"  id="yanzhengma" name="yanzhengma" width="50%">
                        <img src="images/yanzhengma.JPG" alt="" height="35" width="80">
                        <a href="#">换一张</a>
                    </div>
                    <div class="chk">
                        <label for="ch1" width="60px">10天免登陆</label>
                        <input type="checkbox" id="ch1">
                        <a href="register.jsp">免费注册</a>
                    </div>
                    <div class="buts">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">登陆</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="search-group">
    <div class="input-group">
        <input type="text" class="form-control" id="search-part-btn" placeholder="Search for...">
        <span class="input-group-btn">
        <button class="btn btn-search" type="button">搜索</button>
        </span>
    </div>
</div>

<!--主体内容-->
<div class="container" style="width: 1200px;">
    <section class="screen">
        <ul>
            <li>
                <span class="firstterm">类别:</span>
                <div class="otherterm">
                    <div class="ra-brand">
                        <a href="../sortGoods">不限</a>
                    </div>
                    <c:forEach var="type" items="${allTypes}">
                        <div class="ra-type">
                            <a href="../sortGoods?typeId=${type.typeId}">${type.typeName}</a>
                        </div>
                    </c:forEach>
                </div>
            </li>
        </ul>
    </section>
    <section class="screen1">
        <div>
            <span>您可能还想搜:</span>
            <span>男装衬衫 </span>
            <span>男装短袖 </span>
            <span>男鞋 </span>
            <span>女装 </span>
        </div>
    </section>
    <section class="goodslist" >
        <ul id="goodShow">
            <c:if test="${!empty ByTypesGoods }">
                <c:forEach var="good" items="${ByTypesGoods }">
                    <div class="col-md-3 goods_item">
                        <span class="goodID" style="display: none;">${good.goodsId}</span>
                        <a href="../goodsinfo?goodId=${good.goodsId}"><img src="${good.goodsImage}" style="width: 194px;height: 194px;"></a>
                        <div class="goods_describe">
                            <span>${good.goodsDesc}</span>
                        </div>
                        <div class="goods_price">
                            <span>￥${good.goodsPrice}</span>
                        </div>
                        <div class="goods_storeName">
                            <i class="fa fa-shopping-bag" style="margin-right: 5px;color: #f06000;"></i>
                            <span>${good.supplier}</span>
                        </div>
                        <div class="goods_sales">
                            <span>月销 ${good.salesQty}</span>
                        </div>
                    </div>
                </c:forEach>
            </c:if>
        </ul>
    </section>
</div>

</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    // $('#search-part-btn').focus(function(){
    //     window.location.href="search.jsp";
    // })
</script>
</html>
